<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>热文</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    .flex{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .flex img{
        width: 11.5rem;
        height: 13rem;
        margin-right: 16rem;
        margin-top: 10rem;
        padding: 8rem;
    }
    ul{
        display: flex;
        list-style: none;
        margin:14rem 18rem 0 10rem;
        width: 300rem;
        white-space: nowrap;
        overflow-y: hidden;
        overflow-x: scroll;
    }
    ul::-webkit-scrollbar {
        display:none
    }
    ul>li{
        margin-right: 29.5rem;
        font-size: 14rem;
        font-weight: bold;
        color: #9999;
    }
    .active{
        color: #000000;
    }
    .active:after{
        content:'';
        display:block;
        width:14rem;
        border-bottom:2px solid #000;
        margin: 3rem auto;
    }
    .list{
        display: flex;
        padding-left: 15.5rem;
        padding-right: 42rem;
        margin-top: 22rem;
    }
    .list img{
        width: 94.5rem;
        height: 63rem;
    }
    .list-de{
        margin-left: 16rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .list-title{
        font-size: 15rem;
        font-weight: bold;
        color: #020202;
    }
    .date{
        font-size: 10.92rem;
        color: #2C2C2C;
    }
    </style>
    <script>
        !function(n){
            var  e=n.document,
            t=e.documentElement,
            i=37500,
            d=i/100,
            o="orientationchange"in n?"orientationchange":"resize",
            a=function(){
                var n=t.clientWidth||320;n>720&&(n=720);
                t.style.fontSize=n/d+"px"
            };
            e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))
        }(window);
    </script>
</head>
<body>
    <div id="app">
        <div class="flex" style="overflow: hidden;">
            <ul id="tab-tilte">
                <li :class="{active:index==ishow}" v-for="(item,index) in list" @click="getItems(index,item.tag)">{{item.name}}<span class="head-line"></span></li>
            </ul>
            <img src="__CDN__/assets/images/gd.png" @click="ahref">
        </div>
        <div class="list" v-for="(item,index) in items" >
            <img :src="items.imageUrls" v-if="items.imageUrls">
            <div class="list-de">
                <div class="list-title">{{item.title}}</div>
                <div class="date">{{item.publishDate}}</div>
            </div>
        </div>
    </div>
    
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<!-- <script type="text/javascript">
    $(document).ready(function(){
        $('#tab-tilte li').click(function(){
           var cur=$(this).index(); //获取当前点击tab标题的索引值
            tabFun(cur);//调用方法
        });
    });
    function  tabFun(cur){
        $('#tab-tilte li').eq(cur).addClass('active').siblings().removeClass('active');
    }
</script> -->
<script>
new Vue({
        el: '#app',
        data() {
            return  {
                ishow:0,
                list:[],
                items:[]
            }
            
        },
        mounted(){
            var that = this
            $.ajax({
                //请求方式
                type : "GET",
                //请求的媒体类型
                contentType: "application/json;charset=UTF-8",
                //请求地址
                url : "http://app.aebrowser.cn/api/v1.cast/getNav",
                dataType:'jsonp',
                //数据，json字符串
                data:{
                    token:'c6e57bd8-b6b7-4dfa-be6b-ea9e03b914c5'
                },
                //请求成功
                success : function(res) {
                    if(res.code==1){
                        that.list = res.data
                        console.log(res.data[0].tag)
                        that.getItems(0,res.data[0].tag)
                    }
                }
            });
        },
        methods:{
            ahref(){
                window.location.href="./添加栏目.html";
            },
            getItems(index,id){
                var that = this
                $.ajax({
                    //请求方式
                    type : "GET",
                    //请求的媒体类型
                    contentType: "application/json;charset=UTF-8",
                    //请求地址
                    url : "http://app.aebrowser.cn/api/v1.cast/news",
                    dataType:'jsonp',
                    //数据，json字符串
                    data:{
                        page:'1',
                        tag:id
                    },
                    //请求成功
                    success : function(res) {
                        if(res.code==1){
                            that.items = res.data.data
                            that.ishow=index
                        }
                    }
                });
            }
        }
    })
</script>
</html>